<template>
  <el-menu :collapse="app.isCollapse"  :default-active="app.activePath"  class="el-menu-demo" @select="handleSelect" active-text-color="rgb(0,160,255)" background-color="rgb(41,66,86)" text-color="#fff" unique-opened>
    <el-sub-menu v-for="item in menuList" :key="item.permissionId" :index="item.path">
      <template #title>
        <div style="display: inline-flex; justify-content: center; align-items: center;">
          <el-avatar
              :src="item.icon?item.icon:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
              size="small"
              shape="square"
              style="width: 20px;height: 20px; margin-right: 20px;"
          />
          {{ item.permissionName }}
        </div>
      </template>
      <el-menu-item v-for="child in item.children" :key="child.permissionId" :index="child.path">
        <el-avatar
            :src="child.icon?child.icon:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
            size="small"
            shape="square"
            style="width: 20px;height: 20px; margin-right: 5px;"
        />
        {{ child.permissionName }}
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import appStore from "@/store/appStore.ts";
import {useRoute} from "vue-router";
import {Permission} from "@/api/type/model.ts";
const app = appStore()
const route = useRoute()
const router = useRouter()

watch(()=>route.path,(newVal)=>{
  app.activePath = newVal
},{immediate:true})

defineProps<{ menuList: Permission[] }>()


const handleSelect = (key, keyPath) => {
  router.push(keyPath[1])
};

</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: 400px;
}
.el-tabs__content {
  padding: 0 !important;
}

</style>